<template>
  <div class="list-setting-dialog">
    <el-dialog class="list-setting-dialog" :append-to-body="true" title="导出设置" :visible="open" width="300px" @close="close">
      <!-- <el-row>
        <el-button type="primary" size="mini" @click="saveas(1)">保存</el-button>
        <el-button type="primary" size="mini" @click="saveas(2)">另存样式</el-button>
        <el-button type="danger" size="mini" @click="judges">删除</el-button>
      </el-row> -->
      <!-- <el-form :model="formData">
        <el-row :gutter="15">
          <el-form :model="formData">
            <el-col :span="12">
              <el-form-item label="当前样式">
                <el-select filterable v-model="formData.styleIndex" @change="changtype">
                  <el-option v-for="(item, index) in flagList" :key="index" :label="item.styleName" :value="item.styleId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="样式名称">
                <el-input v-model="formData.styleName "></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-form> -->
      <div style="color: #fb0000; text-align: center;">可拖拽字段名或显示调整顺序！</div>
      <el-table
        border
        :data="changData"
        row-key="xuhao"
        height="400"
        :class="`${this.pageName}`"
        style="width: 80%; margin: 10px auto 0 auto;">
        <el-table-column
          property="field"
          label="字段名">
        </el-table-column>
        <el-table-column
          label="显示"
          width="50">
          <template slot-scope="scope">
            <el-checkbox @change="changeCheck" v-model="scope.row.isShow"></el-checkbox>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" v-if="loadShow" @click="saveas(1)">确 定</el-button>
      <el-button type="primary" v-else :loading="true">加载中</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  setputBoxFieldOrder,
  deleteField
} from '../finance/api/finance'
import Sortable from 'sortablejs'
export default {
  props: {
    tableProps: {
      type: String,
      default: () => {
        return ''
      }
    },
    allList: {
      type: String,
      default: () => {
        return ''
      }
    },
    pageName: {
      type: String,
      default: () => {
        return ''
      }
    },
    listIndex: {
      type: String,
      default: () => {
        return ''
      }
    },
    open: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      formData: {
        styleIndex: '',
        styleName: ''
      },
      flagList: [],
      changData: [],
      loadShow: true
    }
  },
  mounted () {
  },
  watch: {
    open (message) {
      if (message) {
        this.changData = JSON.parse(this.tableProps)
        this.flagList = JSON.parse(this.allList)
        this.formData.styleIndex = this.listIndex
        this.init()
      }
    }
  },
  methods: {
    changtype (e) {
      this.formData.styleIndex = e
      this.flagList.map(item => {
        if (item.styleId === e) {
          this.changData = item.returnList
        }
      })
      console.log(e, 'eeeeeeeeee')
    },
    changeCheck (b) {},
    // 确认
    async sure () {
      this.loadShow = false
      let that = this
      const res = await setputBoxFieldOrder({
        pageName: this.pageName,
        fieldList: this.changData
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        setTimeout(function () {
          that.loadShow = true
        }, 500)
        this.formData.styleName = ''
        this.$emit('changtype', this.formData.styleIndex)
        this.$parent.parentName() // 调用父组件的方法
      } else {
        this.$notify({
          title: '出现错误',
          message: res.msg,
          type: 'error'
        })
      }
      this.loadShow = true
      this.close()
    },
    saveas (st) {
      if (st === 1) {
        this.changData.map((item, index) => {
          item.styleId = this.formData.styleIndex
          item.showStyleId = this.formData.styleIndex
          if (this.formData.styleName !== '') {
            item.styleName = this.formData.styleName
          }
          if (item.isShow === true) {
            item.isShow = 0
          } else {
            item.isShow = 1
          }
        })
        this.sure()
      }
      if (st === 2) {
        if (this.formData.styleName === '' || this.formData.styleName.replace(/\s*/g, '') === '默认样式') {
          this.$message({
            message: '请输入样式名称',
            type: 'warning'
          })
          return false
        }
        this.changData.map((item, index) => {
          item.showStyleId = ''
          item.styleId = ''
          item.styleType = 2
          item.styleName = this.formData.styleName
          if (item.isShow === true) {
            item.isShow = 0
          } else {
            item.isShow = 1
          }
        })
        this.sure()
      }
    },
    judges () {
      this.flagList.map((item, index) => {
        if (item.styleId === this.formData.styleIndex) {
          if (item.returnList[index].styleType === '1') {
            this.$message({
              message: '默认数据不能删除！',
              type: 'warning'
            })
            return false
          } else {
            this.delStyle()
          }
        }
      })
    },
    async delStyle () {
      const res = await deleteField({
        styleId: this.formData.styleIndex
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        this.$parent.parentName() // 调用父组件的方法
        this.close()
      } else {
        this.$notify({
          title: '出现错误',
          message: res.msg,
          type: 'error'
        })
        this.close()
      }
    },
    init () {
      this.$nextTick(() => {
        this.initSort()
      })
    },
    // 行拖拽
    initSort () {
      const tbody = document.querySelectorAll(`.${this.pageName} .el-table__body-wrapper > table > tbody`)[0]
      const _this = this
      Sortable.create(tbody, {
        onEnd ({ newIndex, oldIndex }) {
          const currRow = _this.changData.splice(oldIndex, 1)[0]
          _this.changData.splice(newIndex, 0, currRow)
        }
      })
    },
    // 关闭
    close () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="less">
.list-setting-dialog {
  .el-input {
    .el-input__inner {
      height: 28px;
      line-height: 28px;
    }
  }
}
</style>
